import React, { Component } from 'react';
import { routerRedux, Route, Switch } from 'dva/router';

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,
    Select, message, DatePicker, Popconfirm,
    Form, Upload
} from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './UpdataPassword.less';
//修改密码
const { MonthPicker, RangePicker } = DatePicker;

const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ user1 }) => ({
    user1,
}))
@Form.create()
export default class UpdataPassword extends Component {
    state = {
        confirmDirty: false,
        password: '',
        newPw: '',
        confirm: '',
    }

    handleOldPassword = (e) => {
        this.setState({
            oldPassword: e.target.value
        })
    }
    handleNewPassword = (e) => {
        this.setState({
            newPassword: e.target.value
        })
    }
    handleAgainPassword = (e) => {
        this.setState({
            againPassword: e.target.value
        })
    }

    //表单提交
    handleSubmit = (e) => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((err, values) => {
            if (!err) {
                // console.log(' sessionStorage.getItem("userName") ', sessionStorage.getItem("userName"));
                dispatch({
                    type: 'users/updatePassWord',
                    payload: {
                        userName: sessionStorage.getItem("userName"),
                        ...values,
                    },
                    callback: () => {
                        this.props.dispatch(routerRedux.push('/user/login'));
                    }
                })
            }
        });
    }

    //验证原始密码是否正确
    compareToOriginalPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== sessionStorage.getItem("password")) {
            callback('旧密码输入错误！');
        } else {
            callback();
        }
    }

    //验证新密码和原始密码是否相同
    compareToOldPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value == form.getFieldValue('password')) {
            callback('新密码和旧密码不能一致！');
        } else {
            callback();
        }
    }

    //验证两次密码是否一致
    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('newPw')) {
            callback('两次密码输入不一致！');
        } else {
            callback();
        }
    }

    //验证密码是否为空
    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['[confirm]'], { force: true });
        }
        callback();
    }

    //表单重置
    handleFormReset = () => {
        const { form } = this.props;
        form.resetFields();
        this.setState({
            password: '',
            newPw: '',
            confirm: '',
        });
    }

    //获取密码框中鼠标的焦点
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }

    render() {
        const { form, login } = this.props;
        const { getFieldDecorator } = this.props.form;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            }, 
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 13 },
                md: { span: 7 },
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: { span: 24, offset: 0 },
                sm: { span: 7, offset: 8 },
            },
        };

        return (
            <PageHeaderLayout
                title="修改密码"
                logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
            >
                <Card bordered={false}>
                    <Form onSubmit={this.handleSubmit} style={{ marginTop: 10 }}>
                        <Form.Item {...formItemLayout} label="原始密码">
                            {getFieldDecorator('password', {
                                rules:
                                    [{ required: true, message: '请输入原始密码!' },
                                    {
                                        validator: this.compareToOriginalPassword,
                                    }],
                            })(<Input type="password" addonBefore={<Icon type="lock" />} placeholder="请输入原始密码" />)}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="	新密码">
                            {getFieldDecorator('newPw', {
                                rules:
                                    [{ required: true, min: 6, message: '密码长度必须大于6位！' },
                                    {
                                        validator: this.validateToNextPassword,
                                    }],
                            })(<Input type="password" addonBefore={<Icon type="lock" />}  placeholder="请输入新密码" onBlur={this.handleConfirmBlur}/>)}
                        </Form.Item>
                        <Form.Item {...formItemLayout} label="确认密码">
                            {getFieldDecorator('confirm', {
                                rules:
                                    [{ required: true, message: '请输入确认密码！' },
                                    {
                                        validator: this.compareToFirstPassword,
                                    }],
                            })(<Input type="password"  addonBefore={<Icon type="lock" />} placeholder="请输入确认密码" />)}
                        </Form.Item>
                        <Form.Item {...submitFormLayout} style={{ marginTop: 30 }}>
                            <Button type="primary" htmlType="submit" >提交</Button>&nbsp;&nbsp;&nbsp;
                            <Button style={{ marginLeft: 10 }} onClick={this.handleFormReset}>重置</Button>
                        </Form.Item>
                    </Form>
                </Card>
            </PageHeaderLayout>
        );
    }
}
